<template>
  <div class="flex-col grow-1">
    <div class="flex-row grow-1 flex-wrap bg-texture-light dark:bg-texture-dark p-20">
      <div v-for="(item,index) in  routeMenu" :key="index+(item.name as string)" class="xcol h-auto w-1/3 p-10 border border-light-6 rounded bg-light-12 mb-5 last:mb-0">
        <div class="text-xs">{{ item }}</div>
        <el-button class="w-full mt-10" type="success" @click="dynamicRouter?.push(item)">{{ item.name }}--</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance, onActivated, onMounted, type PropType, type ComponentPublicInstance } from 'vue';
import { ElButton } from 'element-plus';
import type { VmoxRouteLocationNamedRaw } from "@src/router/use.lib";
import { useRouter } from "@src/router/use.lib";
import Image01 from "@src/assets/img/01.jpg";

export default defineComponent({
  name:'catch-test-center',
  components:{ElButton},
  props:{
    appName:{
      type:String as PropType<string>,
      default:''
    }
  },
  setup(props,context){
    const { proxy } = getCurrentInstance() as { proxy : ComponentPublicInstance };
    const inputValue = ref("");
    const dynamicRouter = useRouter();
    const routeMenu = ref([
    {
      name:'enmotion1',
      query:{name:'queryname1'},
      params:{name:'name1',tanentId:'id1'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion1/:name/:tanentId',
          meta:{
            keepAlive:true,
            pageName:'enmotion1'
          }
        }
      }
    },
    {
      name:'enmotion1',
      query:{name:'queryname2'},
      params:{name:'name2',tanentId:'id2'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion1/:name/:tanentId',
          meta:{
            keepAlive:false,
            pageName:'enmotion1'
          }
        }
      }
    },
    {
      name:'enmotion2',
      query:{name:'enmotion'},
      params:{name:'enmotion'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion2/:name',
          meta:{
            keepAlive:true,
            pageName:'enmotion1'
          }
        }
      }
    },
    {
      name:'enmotion3',
      query:{name:'enmotion'},
      params:{name:'enmotion'},
      template:{
        pageKey:'TestPg',
        parent:'main-pg',
        route:{
          path:'/enmotion3/:name',
          meta:{
            keepAlive:false,
            pageName:'enmotion1'
          }
        }
      }
    },
    ] as VmoxRouteLocationNamedRaw[]);
    onMounted(() => {
      console.log('onActivated');
    })
    onActivated(()=>{
      console.log('onActivated');
    });
    return {
      // lazyOpen,
      Image01,
      routeMenu,
      dynamicRouter,
      proxy,
      inputValue
    }
  }
});
</script>